<template>
	<view class="goods">
		<!-- <view class="navbar" :style="{ marginTop: systemBarHeight + 'px' }">
			<uni-nav-bar :title="title" backgroundColor="#f8f8f8" :border="false" :height="40" :leftWidth="87">
				<view slot="left" class="navbar-left">
					<uni-icons type="back" size="20" @click="back"></uni-icons>
					<u-line direction="column" :hairline="false" length="36" margin="0 8px" color="#E7E7E7"></u-line>
					<uni-icons type="home" size="20" @click="home"></uni-icons>
				</view>
			</uni-nav-bar>
		</view> -->
		
		<!-- <view class="type">
			<view class="type-text">
				<text>已选车型</text>
				<text>东风一汽重卡 2022款</text>
			</view>
			<uni-icons type="forward" size="18"></uni-icons>
		</view> -->
		
		<view v-if="emptyVisible" class="empty">
			<image src="@/static/empty.png"></image>
			<text>无数据</text>
		</view>
		
		<view class="list">
			<view class="list-item" v-for="item of list" :key="item.goodsId" @click="handleDetail(item.jfcode)">
				<view class="li-left">
					<view class="lil-goods">
						<image v-if="item.imgURL" :src="item.imgURL" mode="scaleToFill"></image>
						<image v-else src="@/static/goods_default_square.png" mode="scaleToFill"></image>
						<view class="tcll-g-markrt" v-if="item.buyPromotion && item.buyPromotion.buyPromotionList && item.buyPromotion.buyPromotionList.length">
							<view class="tcll-gm-left">
								满 <text class="tcll-gml-count">{{ item.buyPromotion.buyNum }}</text> 条
							</view>
							<view class="tcll-gm-right">
								<!-- BUY_GIFT-购物有礼，RAFFLE-购胎抽奖 -->
								<template v-if="item.buyPromotion.buyPromotionList.length === 1">
									<text v-if="item.buyPromotion.buyPromotionList[0].code === 'BUY_GIFT'">享赠品</text>
									<text v-else-if="item.buyPromotion.buyPromotionList[0].code === 'RAFFLE'">享抽奖</text>
								</template>
								<text v-else>享赠品和抽奖</text>
							</view>
						</view>
					</view>
					<view class="tcll-mark" v-if="item.promotionLabel && item.promotionLabel.length">
						<!-- DISCOUNT-会员折扣,POINT-积分 -->
						<template v-if="item.promotionLabel.length === 1">
							<img v-if="item.promotionLabel[0].code === 'DISCOUNT'" src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_mark_discount.png" alt="">
							<img v-else-if="item.promotionLabel[0].code === 'POINT'" src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_mark_int.png" alt="">
						</template>
						<img v-else src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_mark_int_dis.png" alt="">
					</view>
				</view>
				
				<view class="list-item-info">
					<view class="title">{{ item.name }}</view>
					<!-- <view class="good">{{ item.good }}</view> -->
				<!-- 	<view class="price">
						<text class="new"><text class="money">¥</text>{{ item.discountShowPrice}}</text>
						<text class="old">¥{{ item.sellPrice}}</text>
					</view> -->
					<view  v-if="index === 'hlt'">
						<view class="tclr-tagList" v-if="item.tagList && item.tagList.length" >
							<view class="tclrt-item" v-for="tag in item.tagList" :key="tag.id">{{ tag.name }}</view>
						</view>
						<view class="tclr-money">
							<text class="tclrm-color">
								<text class="tclr-dollar" v-if="item.useCouponPrice">券后价￥</text>
								{{ item.useCouponPrice || item.discountShowPrice }}
								</text>
							<text class="tclrm-delete">
								<text class="tclr-dollar">￥</text>
								{{ item.sellPrice }}
							</text>
						</view>
					</view>
<!-- 					<view  v-if="index === 'hlt'">
						<view class="discount" v-for="tag of item.promotionList">
							<u-tag
								:text="tag.typeName" 
								:key="tag.typeName" 
								bgColor="#FFEFEF" 
								borderColor="#FFB2B2" 
								color="#FF7B7B" 
								size="mini" 
								plain 
								plainFill
							>
							</u-tag>
							<view class="name">{{ tag.typeName }}</view>
							<text class="desc">{{ tag.title.split(' ')[0] }}<text class="num">{{ tag.title.split(' ')[1] }}</text></text>
						</view>
					</view> -->
				</view>
			</view>
		</view>	
		
		<uni-load-more :status="status" v-if="loadVisible"/>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	
	export default {
		data() {
			return {
				systemBarHeight: 0, // 系统状态栏的高度
				title: '换轮胎',
				list: [],
				index: '',
				status: 'more',
				page: 1,
				size: 6,
				total: 0,
				loadVisible: false,
				emptyVisible: false,
			};
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
		},
		onLoad(option) {
			uni.showLoading({
			  title: '加载中...'
			})
			this.index = option.index
			this.title = this.index === 'hlt' ? '换轮胎' : '做保养'
			uni.setNavigationBarTitle({ // 设置导航栏标题
				title: this.title
			})
			// this.getSysteminfo();
			this.getList()
		},
		onReachBottom() {
			if(this.list.length >= this.total) {
				this.status = 'noMore'
				return
			}
			this.loadVisible = true
			this.status = 'loading'
			this.page++ 
			this.getList('loading')
		},
		onPullDownRefresh() {
			this.loadVisible = false
			this.page = 1
			this.getList('refresh')
		},
		methods: {
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			back() {
				uni.navigateBack()
			},
			async getList(flag) {
				let type = this.index === 'hlt' ? '1' : '2' // 1-轮胎,2-保养品
				const res = await this.$request({
					method: 'GET',
					url: '/product-center/merchantPurchase/new/pageGoodsByDriver',
					data: {
						goodsType:type,
						pageNum: this.page,
						pageSize: this.size,
						userId: this.getUserInfo.id
					}
				})
				if (flag === 'refresh') {
					this.list = []
				}
				this.list = this.list.concat(res.datas.data)
				this.total = res.datas.count
				this.loadVisible = this.total > 0
				this.emptyVisible = this.total === 0
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			handleDetail(code) {
				uni.navigateTo({
				    url: `/components/goodsDetail?jfcode=${code}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.goods {
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	position: absolute;
	display: flex;
	flex-direction: column;
	/deep/ .uni-load-more {
		height: auto;
		margin: 16px 0;
	}
}
.navbar {
	&-left {
		height: 32px;
		padding: 0 8px;
		display: flex;
		align-items: center;
		border-radius: 32rpx;
		border: 1rpx solid #E3E6EB;
	}
}

.type {
	height: 48px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px red solid;
	&-text {
		text {
			font-size: 24rpx;
			line-height: 36rpx;
			&:first-child {
				color: rgba(#000000, .45);
				margin-right: 10px;
			}
			&:last-child {
				color: rgba(#000000, .85);
			}
		}
	}
}

.list {
	width: 100%;
	.list-item {
		// margin: 32rpx;
		display: flex;
		border-bottom: 1px rgba(0,0,0,0.08) solid;
		overflow: hidden;
		padding: 20rpx 16rpx;
		box-sizing: border-box;
		.li-left {
			position: relative;
			.lil-goods {
				position: relative;
				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
				}
				// 营销文案
				.tcll-g-markrt {
					position: absolute;
					left: 0;
					bottom: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 9px;
					color: #ffffff;
					background-color: #FB003D;
					height: 34rpx;
					width: 100%;
					font-weight: bold;
					letter-spacing: 1px;
					.tcll-gm-right {
						background: linear-gradient(153deg, #FEFAE7 0%, #FFD938 100%);
						-webkit-background-clip: text; 
						-webkit-text-fill-color: transparent; 
					}
				}
			}
			
			.tcll-mark {
				position: absolute;
				top: 0;
				right: 0;
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}



		
		.list-item-info {
			width: calc(100% - 104px);
			padding-left: 24rpx;
			display: flex;
			flex-direction: column;
			.title {
				color: #333333;
				font-size: 14px;
				text-shadow: 0 0 0.1px currentColor;
				overflow:hidden;
				text-overflow: ellipsis;
				-o-text-overflow:ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp:2;
			}
			.good {
				font-size: 24rpx;
				line-height: 20px;
				color: rgba(0,0,0,0.35);
			}
			.price {
				line-height: 30px;
				.new {
					font-size: 16px;
					font-weight: bold;
					color: #EE3B3B;
					margin-right: 10rpx;
					.money {
						font-size: 10px;
					}
				}
				.old {
					font-size: 10px;
					color: rgba(#000000, .45);
					line-height: 28rpx;
					text-decoration: line-through;
				}
			}
			.discount {
				display: flex;
				align-items: center;
				.desc {
					margin: 0 20rpx;
					font-size: 26rpx;
					color: rgba(#000000, .45);
				}
				.num {
					color: #CF1A1B;
				}
			}
		
			.tclr-tagList {
				margin-top: 12rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				max-height: 88rpx;
				overflow: hidden;
				.tclrt-item {
					font-size: 11px;
					padding: 4rpx;
					box-sizing: border-box;
					color: #996C00;
					background-color: #FFF8E6;
					border-radius: 4rpx;
					margin: 0 12rpx 8rpx 0;
				}
			}
			.tclr-money {
				margin-top: 16rpx;
				.tclrm-color {
					color: rgba(238, 59, 59, 1);
					font-size: 15px;
					text-shadow: 0 0 0.1px currentcolor;
				}
				.tclrm-delete {
					margin-left: 8rpx;
					font-size: 12px;
					color: rgba(0, 0, 0, 0.45);
					text-decoration:line-through;
				}
				.tclr-dollar {
					font-size: 12px;
				}
			}
		}
	}
}

.empty {
	width: 100%;
	height: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	image {
		width: 220px;
		height: 180px;
	}
	text {
		font-size: 30rpx;
		color: rgba(0,0,0,0.45);
		line-height: 30rpx;
	}
}
</style>
